<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            display: block;
            margin: 0 auto;
            border:1px #888 solid;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
<script>
    var	canvas = document.querySelector("#canvas");
    canvas.width = 800;
    canvas.height = 600;
    var ctx = canvas.getContext("2d");

    function ball(x,y,r,color,speedX,speedY){
        this.x = x;
        this.y = y;
        this.r = r;
        this.color = color;
        this.speedX = speedX;
        this.speedY = speedY;
    }
    ball.prototype={
        drawArc:function(){
            ctx.beginPath();
            ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
            ctx.fillStyle = this.color;
            ctx.fill();
            ctx.closePath();
        },
        move:function () {
            if(this.x+this.r+this.speedX > canvas.width || this.x-this.r+this.speedX < 0){
                this.speedX = -this.speedX;
            }
            if(this.y+this.r+this.speedY > canvas.height || this.y-this.r+this.speedY < 0){
                this.speedY = -this.speedY;
            }
            this.x += this.speedX;
            this.y += this.speedY;
        }
    }
    var arr = [];
    var num=100;
    for (let  i=0;i<num;i++){
        var r=random(5,20);
        var x=random(r,800);
        var y=random(r,600);
        var color= `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
        var speedX=random(1,10);
        var speedY=random(1,10);
        var ballObj=new ball(x,y,r,color,speedX,speedY);
        arr[i]=ballObj;

    }

    function ani() {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        for(let i=0;i<arr.length;i++){
            arr[i].drawArc();
            arr[i].move();
        }
        window.requestAnimationFrame(ani);

    }
    ani();
    function random(a,b){
        return Math.ceil(Math.random() *(b-a) + a);
    }
</script>
</html>